<template>
    <div id="Industy">
        <div class="jx-content">
            <div class="content-box">
                <div class="admin-index-list content-box">
                    <el-row :gutter="60">
                        <el-col :md="6"  >
                            <div class="admin-add" @click="addFn">
                                <i class="iconfont icon-jiahao "></i>
                                <p >添加行业案例</p>
                            </div>
                        </el-col>
                        <el-col :md="6" v-for='(item ,index) in caseslists' :key="index"  >
                            <div class="admin-lisitem" >
                                <router-link  :to="{ path: '/Admin/Production/addIndustryCase',query: {Ids:item.caseId,num:id}}">
                                    <div class="admin-list-img">
                                        <h3 class="titlle">{{item.caseTitle}}</h3>
                                        <p class="caseIntro">{{item.caseIntro}}</p>
                                        <img :src="item.file" />
                                    </div>
                                </router-link>
                                <div class="admin-wrong-box">
                                    <i class="iconfont icon-Group-" @click="deleteFn(item.caseId)"></i>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
           </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id:'',
                casename:'',
                caseslists:[]
            }
        },
        mounted () {
            this.id=this.$route.query.id
            this.init()
        },
        methods:{
             init(){
                let self = this
                self.$http.get('/tes/business/case/caseList?businessCaseId='+this.id).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.caseslists  = res.data
                        console.log( self.caseslists)
                    }else{
                        self.$message.error(res.message)
                    }
                })
             },
            //删除
            deleteFn(id){
                let self = this;
                self.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.get('/tes/business/case/delCaseById?caseIds='+id).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {});
            },
            //添加
            addFn(){
             this.$router.push({
                 path: '/Admin/Production/addIndustryCase',
                 query: {Id:this.id}
             })
            }
        }
    }
</script>

<style lang="scss" scoped>
 @import "./../../../styles/layout/color_variables";
#Industy{
    width: $width;
    margin: 20px auto;
    color: #727272;
     .admin-index-list {
        margin-left: 40px;
        margin-top: 35px;
        .el-col {
            margin-left:0px; 
            margin-right:-15px
        }
        .admin-wrong-box {
            .icon-Group-{
                color: $title-gray;
                font-size: $fs18;
                position: absolute;
                right: 10px;
                top: 10px;
                cursor: pointer;
            }
         }
        .admin-add {
            height: 280px;
            border-radius: 6px;
            background: #fff;
            border: 1px dashed #999;
            text-align: center;
            font-size: 35px;
            color: #999;
            cursor: pointer;
               i{
                    display: inline-block;
                    margin-top: 110px
                }
                 p{
                    font-size: 14px;
                }
            //box-shadow: 0px 7px 25px #eaeaea
            &:hover{
                transition: all 0.3s;
                transform: scale(1.05);
                color: #1277eb;
                border: 1px dashed #1277eb;
            }
        }
         .admin-lisitem {
            height: 280px;
            background: #fff;
            border-radius: 6px;
            position: relative;
            -webkit-transition: .3s transform;
            transition: .3s transform;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            margin-bottom: 40px;
            z-index: 8;
            border: 1px solid #e8e8e8;
            cursor: pointer;
            box-shadow: 0px 7px 25px #eaeaea;
            .admin-list-img {
                text-align: center;
                padding: 40px 27px 30px 27px;
                 .titlle{
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    height: 41px;
                    font-size: 16px;
                    line-height: 20px;
                    text-align: center;
                    color: $title-gray;
                }
                .caseIntro{
                    margin:  2px 0 12px 0;
                    overflow : hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    text-align: center;
                    height: 50px;
                    line-height: 17px;
                    font-size: 12px;
                    color: #888888;
                }
                &>img{
                     width: 100%;
                     max-height: 100px;
                }
                .admin-btn-box {
                    position: absolute;
                    right: 8px;
                    bottom: 10px;
                    color: #fff;
                    width: 20px;
                    height: 20px;
                }

            }
            &:hover{
                transition: all 0.3s;
                transform: scale(1.05);
            }
        }
    }


}
</style>
